import React, { Component } from "react";
import moment from "moment";
import Crumbs from "./Crumbs/index.jsx";
import api from "../../serve/api";
import styles from "./AdDetail.module.scss";
import { backTop } from "./../../util/index";

const router = [
  {
    name: "专题广告",
    path: "themeAd"
  }
];

export default class CommonDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loadState: "pending",
      contentData: {},
      // 页面类型
      pageType: "AdDetail",
      // 页面类型下 具体文章id
      id: "",
      nowList: []
    };
  }

  componentDidMount() {
    const { match } = this.props;
    const id = match.params.id;

    this.getTheme(id);
  }

  async getTheme(id) {
    let data = await api.getThemeAdById({ id: id });
    if (data && data.code === "000000") {
      console.log("res", data.result);
      this.setState({
        contentData: data.result || []
      });
    }
  }

  goToTop() {
    backTop();
  }

  render() {
    const { contentData, pageType, nowList } = this.state;
    const path = `/mainPage/${pageType}`;
    const crumbsItem = router.filter(item => item.path === pageType)[0];
    console.log("aaaa", crumbsItem);
    let crumbsList = [
      {
        name: "首页",
        path: "/mainPage"
      },
      // {
      //   name: '专题广告',
      //   path: '/mainPage/themeAd'
      // },
      {
        name: "详情",
        path: ""
      }
    ];

    return (
      <div className={styles.common_container}>
        <Crumbs list={crumbsList || []} />
        <div className={styles.common_detail}>
          <div className={styles.detail_content}>
            <div className={styles.title_info}>
              <div className={styles.title}>
                {contentData.title || contentData.name || ""}
              </div>
              <div className={styles.sub_title}>
                {contentData.sub_title || ""}
              </div>
              <div className={styles.info_bg}>
                <div className={styles.info}>
                  <div className={styles.author}>
                    作者：
                    <span>{contentData.author || ""}</span>
                  </div>
                  <div className={styles.origin}>
                    来源：
                    <span>{contentData.origin || ""}</span>
                  </div>
                </div>
                <div className={styles.click_num}>
                  点击量：{contentData.client_times || ""}
                  <span>
                    {moment(contentData.public_at).format("YYYY-MM-DD")}
                  </span>
                </div>
              </div>
            </div>
            <div className={styles.html_content}>
              <div class="ql-container ql-snow">
                <div class="ql-editor">
                  <div
                    dangerouslySetInnerHTML={{ __html: contentData.content }}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* <div className={styles.backTop} onClick={() => this.goToTop()}>
          返回顶部
        </div> */}
      </div>
    );
  }
}
